<template>
    <div>
        <div class="blog-up">
            <p class="blog-up-name">This is my blog</p>
        </div>
        <div class="blog-content">
            <div class="blog-content-button">
                <button @click="allClick">全部</button>
                <button @click="cssClick">css</button>
                <button @click="htmlClick">html</button>
                <button @click="markedClick">marked</button>
                <button @click="nodemailerClick">nodemailer</button>
                <button @click="mongodbClick">mongodb</button>
                <button @click="moduleClick">模块介绍</button>
                <button @click="peopleClick">个人介绍</button>
            </div>
            <div class="modol">
                <div v-for="(item, index) in dataMain" :key="index" class="blog-content-new">
                    <div class="blog-content-updata-up">
                        <h3>{{item.Title}}</h3>
                        <p>{{item.Time}}{{item.Type}}</p>
                        <i class="el-icon-s-comment">{{item.number}}</i>
                        <p v-html="item.Desc"></p>
                        <button @click="showClick(index)">Read More</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'myblog',
    data(){
        return{
            dataMain:[],
            animal:['/Show','/Read']
        }
    },
    methods:{
        getHomeData(){
            this.$axios.get('data/homedata.json').then(
                res => {
                this.dataMain = res.data
                });
        },
        allClick(){
                this.$axios.get('data/homedata.json').then(
                res => {
                    this.dataMain = res.data
                });
            
        },
        cssClick(){
                this.$axios.get('data/cssdata.json').then(
                res => {
                    this.dataMain = res.data
                })
        },
        htmlClick(){
                this.$axios.get('data/html.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        markedClick(){
                this.$axios.get('data/marked.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        nodemailerClick(){
                this.$axios.get('data/nodemailer.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        mongodbClick(){
                this.$axios.get('data/mongodb.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        moduleClick(){
                this.$axios.get('data/module.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        peopleClick(){
                this.$axios.get('data/people.json').then(
                res => {
                    this.dataMain = res.data
                })
            
        },
        showClick(index){
            this.$router.push(this.dataMain[index].animal);
        },
    },
    mounted(){
        this.getHomeData()
    }

}
</script>

<style scoped>

    .blog-up{
        background:url('../assets/sunset.jpg');
        height:570px;
        width:100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-up-name{
        margin: 0;
        color: #fff;
        font-size: 45px;
        font-family: 'Times New Roman';
    }
    .blog-content{
        background-color: #3b3d40;
        padding-top: 40px;
    }
    /* .blog-content-button{

    } */
    button{
        border: 0;
        background-color: #1cd2e0;
        height: 50px;
        width: 90px;
        margin: 10px;
        border-radius: 15px;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
    }
    .blog-content-new{
        width: 930px;
        margin: 0 auto;
        margin-top: 20px;
        text-align: left;
        padding-bottom: 15px;
        border-bottom: 1px solid #fff;
        color: #fff;
    }
    .blog-content-new p{
        margin-top: 10px;
    }
    .blog-content-new h3{
        margin-top: 10px;
    }
    .blog-content-new button{
        height: 34px;
        width: 83px;
        background-color: #80dede;
        border: none;
        border-radius: 7px;
        margin-top: 30px;
    }
    .modol{
        padding-bottom: 20px;
    }
</style>